<template>
    <div class="app-container">
        <el-form
            :model="adminInfo"
            :rules="setRules"
            ref="ruleForm"
            label-width="100px"
            width="500px"
        >
            <el-form-item label="用户名" prop="username">
                <el-input v-model="adminInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="旧密码" prop="email">
                <el-input v-model="adminInfo.oldLoginPwd"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
                <el-input v-model="adminInfo.loginPwd"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password">
                <el-input v-model="adminInfo.loginPwdConfirm"></el-input>
            </el-form-item>

            <el-button type="primary" @click="handleEdit">修改</el-button>
            <el-button type="danger" @click="handleBack">返回</el-button>
        </el-form>
    </div>
</template>

<script>
import { getInfo, setUser } from '@/api/user'
export default {
    name: 'Personal',
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入新密码'));
            } else if(value !== this.adminInfo.loginPwd){
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            url: "",
            adminInfo: {
                id: '',
                loginId: '',
                name: '',
                oldLoginPwd: '',
                loginPwd: '',
                loginPwdConfirm: ''
            },
            setRules: {
                oldLoginPwd: [
                    { required: true, message: '请输入旧密码', trigger: 'blur' }
                ],
                loginPwd: [
                    { required: true, message: '请输入新密码', trigger: 'blur' }
                ],
                loginPwdConfirm: [
                    { required: true, message: '请再次输入新密码', trigger: 'blur' },
                    { validator: validatePass, trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            getInfo().then(res => {
                this.adminInfo = res.data
            })
        },
        handleEdit() {
            if(this.adminInfo.name && this.adminInfo.loginPwd  && this.adminInfo.oldLoginPwd){
                setUser(this.adminInfo).then(res => {
                    if(typeof res === 'string'){
                        const data = JSON.parse(res)
                        this.$message.error(data.msg)
                    }else {
                        this.$message.success('修改成功')
                        this.$store.dispatch('user/logout').then(() => {
                            this.$router.push(`/login?redirect=${this.$route.fullPath}`)
                        })
                    }
                })
            }else {
                this.$message.error('请填写完整信息')
            }
        },
        handleBack(){
            this.$router.push('/dashboard')
        }
    }
}
</script>


<style scoped lang="scss">

</style>
